<template>
  <div>
    <CategorySelector :isShow="!isShowAttrList"></CategorySelector>
    <el-card>
      <div v-if="isShowAttrList">
        <!-- 有三级id就说明三级导航发送请求了 没有就禁用 -->
        <el-button
          :disabled="!categoryStore.category3Id"
          type="primary"
          :icon="Plus"
          @click="toSaveAttrValue"
          >添加属性</el-button
        >
        <el-table
          :data="attrList"
          v-loading="loading"
          border
          style="margin-top: 10px"
        >
          <el-table-column type="index" label="序号" width="180" />
          <el-table-column prop="attrName" label="属性名称" width="180" />
          <el-table-column prop="address" label="属性值列表">
            <template #default="{ row }">
              <el-tag
                class="ml-2"
                type="success"
                v-for="attr in row.attrValueList"
                :key="attr.id"
                >{{ attr.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                title="修改"
                size="small"
                type="warning"
                :icon="Edit"
                @click="toEditAttr(row)"
              ></el-button>

              <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                @confirm="confirmDeleteAttr(row.id)"
                title="你确定要删除这条数据吗?"
              >
                <template #reference>
                  <el-button
                    title="删除"
                    size="small"
                    type="danger"
                    :icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form>
          <el-form-item label="属性名" style="width: 300px">
            <el-input
              placeholder="请输入属性名"
              v-model="attrInfo.attrName"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="!attrInfo.attrName"
              :icon="Plus"
              @click="addAttrValue(row)"
              >添加属性值</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          border
          :data="attrInfo.attrValueList"
          style="margin-bottom: 10px"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column label="属性值名称">
            <template v-slot="{ row }">
              <el-input
                ref="inputRef"
                v-if="row.isShowInput"
                size="small"
                v-model="row.valueName"
                @blur="deleteCurrentRow(row, $index)"
              ></el-input>
              <span
                v-else
                @dblclick="toEditAttrValue(row)"
                style="display: inline-block; width: 100%"
                >{{ row.valueName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ $index }">
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="orange"
                title="确定要删除此条属性吗?"
                @confirm="deleteAttrValue($index)"
              >
                <template #reference>
                  <el-button
                    title="删除"
                    size="small"
                    type="danger"
                    :icon="Delete"
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="saveAttrInfo(row)">保存</el-button>
        <el-button type="default" @click="isShowAttrList = true"
          >取消</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" >
import CategorySelector from "@/components/CategorySelector/index.vue";
export default {
  name: "Attr",
  components: { CategorySelector },
};
</script>

<script lang="ts" setup>
import type {
  AttrListModel,
  AttrValue,
  AttrListModelData,
} from "@/api/product/model/attrModel";
import { ref, watch, reactive, nextTick } from "vue";
import {
  reqGetAttrListData,
  reqDeleteAttr,
  reqAddOrUpdateAttrInfo,
} from "@/api/product/attr";

import { useCategoryListStore } from "@/stores/categoryList";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 获取真实dom
const inputRef = ref<HTMLInputElement>();

// 是否显示列表
const isShowAttrList = ref<boolean>(true);

// 页面中的loading效果
const loading = ref<boolean>(false);

// const { category1Id, category2Id, category3Id } = useCategoryListStore();
// // 创建store实例对象
const categoryStore = useCategoryListStore();

// 接受请求返回的列表参数
const attrList = ref<AttrListModel>([]);

// 定义一个属性对象，用于收集要添加的属性信息
const attrInfo = reactive<AttrListModelData>({
  attrName: "", // 要存储的属性名
  attrValueList: [], // 存储属性的数组
  categoryLevel: 3, // 等级
  categoryId: -1, // id值
});

// 发起请求函数
const getAttrListData = async () => {
  // 呈现加载效果
  loading.value = true;

  attrList.value = await reqGetAttrListData({
    category1Id: categoryStore.category1Id as number,
    category2Id: categoryStore.category2Id as number,
    category3Id: categoryStore.category3Id as number,
  });
  // 关闭加载效果
  loading.value = false;
  console.log(attrList.value);
};

//当组件挂载获取表格信息
watch(
  //检测三级导航id是否改变
  () => categoryStore.category3Id,
  async (category3Id) => {
    console.log("三级导航id更改函数执行");

    if (!category3Id) {
      //清空表格信息
      attrList.value = [];
      return false;
    }
    // 调用请求函数
    getAttrListData();
    console.log(attrList.value);
  },
  // 页面打开立即检测
  { immediate: true }
);

// 删除商品信息 table发送请求
const confirmDeleteAttr = async (id: number) => {
  await reqDeleteAttr(id);

  ElMessage.success("删除商品成功");

  // 发送请求重新删除页面
  getAttrListData();
};

// 4. 添加属性值的格式  其实就是给attrInfo.attrValueList数组中添加内容
const addAttrValue = () => {
  attrInfo.attrValueList.push({
    valueName: "", //属性名称
    attrId: attrInfo.id, // 编辑的时候使用
    isShowInput: true, // 是不是显示输入框  还是说显示一个span标签
  });

  //当页面渲染完成时 自动获取焦点 注意到页面没有完全渲染完成时获取焦点会获取到上一个输入框
  nextTick(() => {
    // 可能元素为空因为再添加之前是没有输入框的
    inputRef.value?.focus();
  });
};

// 输入框失去焦点逻辑
const deleteCurrentRow = (row: AttrValue, index: number) => {
  if (!row.valueName) {
    // 删除内容为空的输入框  从哪里删除 删除几个
    attrInfo.attrValueList.splice(index, 1); //删除当前项
  }

  // 失去焦点时要变成span标签
  row.isShowInput = false;
  return;
};

// 6. 修改属性值
const toEditAttrValue = (row: AttrValue) => {
  // 6.1 让输入框显示出来 这样才能更改数据
  row.isShowInput = true;
  // 6.2 要让当前输入框获取焦点
  nextTick(() => {
    inputRef.value?.focus();
  });
};

// 删除一条属性的值
const deleteAttrValue = (index: number) => {
  attrInfo.attrValueList.splice(index, 1); //删除当前项
  ElMessage.success("属性删除成功");
};

//添加属性按钮逻辑
const toSaveAttrValue = () => {
  // 显示参数表格
  isShowAttrList.value = false;
  // 清空属性添加表格内容
  Object.assign(attrInfo, {
    attrName: "", // 要存储的属性名
    attrValueList: [], // 存储属性的数组
    categoryLevel: 3, // 等级
    categoryId: -1, // id值
  });
};

// 内框保存按钮逻辑
const saveAttrInfo = async () => {
  //将三级导航的id赋值给现在的参数体
  attrInfo.categoryId = categoryStore.category3Id;
  // 发送修改请求
  // console.log(attrInfo);
  await reqAddOrUpdateAttrInfo(attrInfo);

  // 添加成功后，要提示一下用户
  ElMessage.success("操作属性成功...");
  // 跳转到表格页面
  isShowAttrList.value = true;
  // 重新发送请求，获取最新的属性列表数据
  getAttrListData();
};
// reqAddOrUpdateAttrInfo

// 编辑属性之数据回显
const toEditAttr = (row: AttrValue) => {
  // 10.1 跳转到添加页面
  isShowAttrList.value = false;
  // 10.2 将当前待编辑项显示在页面中 attrInfo
  // attrInfo = row // 不能这样直接赋值
  Object.assign(attrInfo, row);
};
</script>


<style>
</style>